<template>
  <view class="news-page">
    <!-- 头部导航 -->
    <view class="header">
      <view class="back" @click="goBack">
		  <image src="/static/img/xiangzuojiantou.png" mode="" style="width: 25px;height: 25px;"></image>
      </view>
      <text class="title">最新资讯</text>
    </view>

    <!-- 资讯列表 -->
    <view class="news-list">
      <view 
        class="news-item" 
        v-for="(item, index) in newsitem" 
        :key="index"
        @click="goToDetail(item)"
      >
        <image :src="'http://localhost:8080' + item.imgSrc" class="item-image"></image>
        <view class="item-info">
          <text class="item-title">{{ item.title }}</text>
          <view class="item-meta">
            <text class="source">{{ item.from }}</text>
            <text class="time">{{ item.date }}</text>
          </view>
        </view>
      </view>
    </view>


  </view>
</template>

<script setup>
import { ref } from 'vue';
// 最新资讯
const newsitem = ref([])

	// 资讯
	uni.request({
		url:"http://localhost:8080/home/news",
		method:'GET',
		success: (res) => {
			console.log(res);
			newsitem.value=res.data.body
		}
	});

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 跳转到资讯详情页
const goToDetail = (item) => {
  uni.navigateTo({
    url: `/pages/news-detail/news-detail?id=${item.id}`
  });
};
</script>

<style scoped>
.news-page {
  background-color: #f8f8f8;
}

/* 头部导航 */
.header {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 15px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}
.back {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.title {
  flex: 1;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: #07c160;
}

/* 资讯列表 */
.news-list {
  padding: 10px;
}
.news-item {
  display: flex;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.item-image {
  width: 120px;
  height: 90px;
}
.item-info {
  flex: 1;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.item-title {
  font-size: 16px;
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
}
.item-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #999;
}

</style>